<script>
import {Button} from "element-ui";

export default {
  name: "button.example.page"
}
</script>

<template>
  <div>
    <h1>   五种情景的按钮 </h1>
    <div>
      <el-button type = "primary"> 主按钮</el-button>
      <el-button type="success">  成功按钮</el-button>
      <el-button plan type="danger">  按钮类型   </el-button>
    </div>

    <h1>   按钮的四种尺寸  </h1>
    <div>
      <el-button size="small" type = "primary"> 主按钮</el-button>
      <el-button size="mini" type="success">  成功按钮</el-button>
      <el-button size="medium" type="danger">  按钮类型   </el-button>
    </div>

    <h1>   朴素按钮 </h1>
    <div>
      <el-button plan type = "primary"> 主按钮</el-button>
      <el-button plan type="success">  成功按钮</el-button>
      <el-button plan type="danger">  按钮类型   </el-button>
    </div>

    <h1>   圆形按钮 </h1>
    <div>
      <el-button round plan type = "primary"> 主按钮</el-button>
      <el-button round plan type="success">  成功按钮</el-button>
      <el-button round plan type="danger">  按钮类型   </el-button>
    </div>

    <h1>   带按钮图标 </h1>
    <div>
      <el-button  type = "primary" plain="el-icon-phone"> 电话按钮</el-button>
      <el-button  type="success" plain="el-icon-star-on">  星星按钮</el-button>
      <el-button  type="danger"plain="el-icon-star-on"> </el-button>
    </div>

    <h1>   按钮组件基础语法  </h1>
    <div>
      <el-button type = "primary"> 主按钮</el-button>
      <el-button type="success">  成功按钮</el-button>
      <el-button plan type="danger">  按钮类型   </el-button>
    </div>

  </div>
</template>

<style scoped>

</style>